<template>
  <el-tabs v-model="tabsObj.activeName" class="created-form-tabs">
    <el-tab-pane label="表单属性" name="formItem">
      <ProForm
        :key="clickCount"
        ref="proFormBox"
        :save-button="false"
        :options="itemForm.options"
        :form-attrs="itemForm.formAttrs"
        @get-model="form => (itemForm.form = form)"
      >
      </ProForm>
    </el-tab-pane>
    <el-tab-pane label="全局属性" name="second">
      <ProForm
        ref="overallFormRef"
        :save-button="false"
        :options="overallForm.options"
        :form-attrs="overallForm.formAttrs"
        @get-model="form => (overallForm.form = form)"
      >
      </ProForm>
    </el-tab-pane>
  </el-tabs>
</template>
<script setup lang="ts">
import { CreatedFormCustomFormProp, CreatedFormOptionsProps } from '../content/index.vue';
import { useOverall } from './hooks/use-overall';
import { backfillMethod, initDefaultOptions } from './basic/backfillMethod';

const props = defineProps<{
  options: CreatedFormOptionsProps[];
}>();

// 所有的props属性集合
const propsKeys = computed(() => {
  let keys = [];
  props.options.forEach(item => {
    keys.push({
      label: item.label,
      value: item.prop,
      type: 'option'
    });
  });
  return keys;
});

const { overallForm } = useOverall(propsKeys);
let tabsObj = reactive({
  activeName: 'formItem'
});

// 是否是第一次点击
let clickCount = ref(0);

let itemForm = reactive<CreatedFormCustomFormProp>({
  selectedIndex: -1,
  selectItem: {},
  form: {},
  formAttrs: {},
  title: '',
  visible: false,
  transitionArr: [],
  options: []
});

onMounted(() => {
  clickCount.value = 0;
  mittBus.on('crated-form-content', cratedFormContentMessage);
});

onUnmounted(() => {
  mittBus.off('crated-form-content', cratedFormContentMessage);
});

const cratedFormContentMessage = ({ item, index }) => {
  // console.log('????');

  clickCount.value++;
  Object.assign(itemForm, {
    selectedIndex: index,
    selectItem: item,
    options: initDefaultOptions(item)
  });
  console.log(itemForm.options, 'itemForm');

  setFormItem(item);
};

const textKeys = ['label', 'prop', 'type', 'hide', 'defaultValue', 'prop'];

const setFormItem = item => {
  const keys = Object.keys(item);

  for (let op of itemForm.options) {
    // 没有修改过显示默认
    if (!item.itemOptions) {
      for (let key of keys) {
        if (op.prop === key && textKeys.includes(key)) {
          // 表单第一次打开同步下默认值
          op.defaultValue = item[key];
          break;
        }
      }
    } else {
      // 修改过后直接回填上传修改过的值
      for (let o of item.itemOptions) {
        if (op.prop === o.prop) {
          op.defaultValue = o.defaultValue;
          break;
        }
      }
    }
  }
  nextTick(() => {
    backfillMethod(itemForm);
  });
  tabsObj.activeName = 'formItem';
};

defineExpose({
  itemForm,
  overallForm
});
</script>
<style lang="scss" scoped src="./index.scss"></style>
<style lang="scss">
.created-form-tabs {
  .el-tabs__content {
    height: 90vh;
    overflow: scroll;
  }
}
</style>
